<template>
    <div>
        <el-dialog v-model="dialogFormVisible" title="修改科目" :show-close="false">
            <el-form>
                <el-form-item label="名称" style="width:200px">
                    <el-input v-model="accountName" autocomplete="off" maxlength="200" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="updateOperationRecordRemarks" :autosize="{ minRows: 4, maxRows: 6 }"
                        type="textarea" maxlength="400" :show-word-limit="true" placeholder="备注一下呗!" />
                </el-form-item>
                <el-form-item label="日期" style="width:200px">
                    <el-input v-model="nowData" autocomplete="off" maxlength="200" :readonly="true" />
                </el-form-item>
                <el-form-item label="打开可修改类型">
                    <el-switch v-model="switchValue" inline-prompt active-text="是" inactive-text="否" size="large"
                        width="100" />
                </el-form-item>
            </el-form>
            <template>

                <el-dialog v-model="switchValue" width="30%" title="选择类型" append-to-body :show-close="false">
                    <div>
                        <span style="color:red" v-show="arraySubjectNameNew.length < 3">请选择三级类!</span>
                    </div>
                    <div style="height:30px"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item style="color:#40ffb1;font-weight:bold">原类型</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="val in store.state.questionBank.subjectModel.subjectTypeNameArray"
                            :key="val">
                            {{val}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div style="height:30px"></div>
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item style="color:#40ffb1;font-weight:bold">修改为</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="vals in arraySubjectNameNew">{{vals.industryName}}
                        </el-breadcrumb-item>
                    </el-breadcrumb>

                    <div style="height:20px"></div>
                    <div>
                        <tree-commponent :treeData="store.state.subjectData" @treeComponent="treeComponent"
                            :showCheckBox="false">
                        </tree-commponent>
                    </div>

                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="switchValueCancel()">取消</el-button>
                            <el-button type="primary" @click="AreYouSure()" :disabled="arraySubjectNameNew.length < 3">
                                确定</el-button>
                        </span>
                    </template>
                </el-dialog>
            </template>
            <el-breadcrumb :separator-icon="ArrowRight" v-show="arraySubjectNameNew.length >= 3">
                <el-breadcrumb-item style="color:#40ffb1;font-weight:bold">类型</el-breadcrumb-item>
                <el-breadcrumb-item v-for="vals in arraySubjectNameNew">{{vals.industryName}}</el-breadcrumb-item>
            </el-breadcrumb>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisibleCancel()">取消</el-button>
                    <el-tooltip class="box-item" effect="light" content="名称为必填" placement="bottom"
                        :disabled="accountName != ''">
                        <span>
                            <el-button type="primary" @click="dialogFormVisiblePreservation()"
                                :disabled="accountName == ''">保存</el-button>
                        </span>
                    </el-tooltip>


                </span>
            </template>
            <!-- <slot></slot> -->
        </el-dialog>
    </div>

</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { computed, onMounted, watch } from '@vue/runtime-core'
import { useStore } from 'vuex'
import TreeCommponent from './TreeCommponent.vue'
import {ArrowRight} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox ,ElNotification} from 'element-plus'
import axios from 'axios';
export default {
  components: { TreeCommponent },
    props: ['modelValue','openShow'],
    emits: ['backData','isUpdate'],
    setup(props,{emit}){
        //1console.log(useStore().state.subjectData,'弹出层')
       let store = useStore();
       const switchValue = ref(false)
       const dialogFormVisible = ref(false)
        //用户更新后选择的类型
       let arraySubjectNameNew = ref([])
       //用户输入信息
       let accountName = ref('')
       let updateOperationRecordRemarks = ref('')


       const data = reactive({
            parentData:null,
            childrenData:null,
            treeSubjectData:null,
            nowData:''
            
       })
       const data2 = reactive({
            parentData:null
       })
       /* data.parentData = props.modelValue
       data.parentData2 = props.modelValue */
       dialogFormVisible.value = props.openShow
       //console.log(1,data.parentData,2,data.parentData2)
        //监听父组件数据更新子组件数据
        //监听openShow
        watch(() => props.openShow, function (newVal, oldVal) {
            dialogFormVisible.value = newVal
        }, {
            deep: true,
            immediate: false
        })
        //监听modelValue
        watch(() => props.modelValue, function (newVal, oldVal) {
            data.parentData = newVal
            //data.parentData2 = newVal
            //data2.parentData = newVal
            accountName.value = newVal.accountTypeName
            updateOperationRecordRemarks.value = newVal.updateOperationRecordRemarks
        }, {
            deep: true,
            immediate: false
        })
        watch(dialogFormVisible,(newVal, oldVal)=> {
            emit('backData',newVal)
        }, {
            deep: true,
            immediate: false
        })
        
        //原类型
        const typeDataSubject = computed(() => {
            let accountTypeId = data.parentData.industryId
            //console.log(store.state.subjectData)
            let datas = store.state.subjectData.filter(val=>{
                val.industryId == 1
            })
            return datas
        })
        

       const subjectData = computed(()=>{
            return data.parentData
       })
       
       const nowData =  computed(()=>{
            return data.nowData = new Date().toLocaleString();
       })

       /* const treeSubjectData = computed(()=>{

            data.treeSubjectData = store.state.subjectData
            data.treeSubjectData.forEach((val,index)=>{
                let len = val.industryAccountType.length <= 0;
                if (len) {
                    data.treeSubjectData.splice(index,1)
                    return
                } 
                val.industryAccountType.forEach((vals,indexs)=>{
                    let len = vals.industryAccountType.length <= 0;
                    console.log(typeof(data.treeSubjectData[3].industryAccountType[indexs]),'123')
                   if(len){
                        data.treeSubjectData[index].industryAccountType.splice(indexs,1)
                   }
                })
            })

            return data.treeSubjectData
       })
       */
        let oldA = null;
       function treeComponent(newA){
        //console.log('xiaog',newA)
            //判断是不是最高级别的目录
                if(newA.level == 1){
                    //如果是的话
                    arraySubjectNameNew.value.splice(newA.level-1,arraySubjectNameNew.value.length,newA)
                    //console.log("一级目录效果",arraySubjectNameNew.value)
                }else if(oldA != null && oldA.industryId == newA.industryParentId){//判断这个是不是上一级的子目录
                    arraySubjectNameNew.value.splice(newA.level-1,0,newA)
                    //console.log("二级目录效果",arraySubjectNameNew.value)
                }else if(oldA != null && oldA.industryParentId == newA.industryParentId){
                    arraySubjectNameNew.value.splice(newA.level-1,4-newA.level,newA)
                    //console.log("二级目录效果",arraySubjectNameNew.value)
                }else{
                    let arr = newA.industryTree.split('/')
                    //循环遍历出科目的类型
                    arr.forEach((val, index) => {
                        if (val == '') {
                            arr.splice(index, 1)
                        }
                    });
                    //console.log('arr',arr)
                    store.state.subjectData.forEach((val,index) => {
                        if(val.industryId == arr[0]){
                            arraySubjectNameNew.value.splice(0,arraySubjectNameNew.value.length,val)
                            if(val.level != 2 && arr.length != 1){
                                val.industryAccountType.forEach((vals,index) => {
                                    if(vals.industryId == arr[1]){
                                        arraySubjectNameNew.value.splice(vals.level-1,0,vals)
                                    }
                                }) 
                            }
                            arraySubjectNameNew.value.splice(newA.level-1,0,newA)
                            return
                        }
                    })
                }
            
            //arraySubjectNameNew.value.splice(a.level-1,1,a.industryName)
            //console.log(arraySubjectNameNew.value,'新的类型')
            oldA = newA;
       }

       function AreYouSure(){
            if(arraySubjectNameNew.value.length >= 3){

                switchValue.value = false
            }
            
       }
       //取消
       
       function dialogFormVisibleCancel(){
            //console.log(1,data.parentData,2,data2.parentData)
           ElMessage({
               type: 'info',
               message: '已取消操作',
           })
           arraySubjectNameNew.value = []
           dialogFormVisible.value = false
           emit('isUpdate',false)
       }
       //保存
       function dialogFormVisiblePreservation(){
            
            ElMessageBox.confirm(
                '确认是否保存?',
                '请确认',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {//确认回调函数

                    axios.put("/api/accountType/updateAccountType",{
                            id:data.parentData.accountTypeId,
                            name:accountName.value,
                            typeId:arraySubjectNameNew.value.length != 0 ? arraySubjectNameNew.value[arraySubjectNameNew.value.length-1].industryId : data.parentData.industryId,
                            time:nowData.value,
                            operationRecordRemarks:updateOperationRecordRemarks.value
                        
                    }).then((response)=>{
                        //console.log("fsd")
                            if(response.status == 200){
                                if(response.data.code == 200){
                                    store.commit('insertData',response.data.data)
                                    ElNotification({
                                        title: '操作成功',
                                        message: '修改成功',
                                        type: 'success',
                                    })
                                    emit('isUpdate',true)
                                    arraySubjectNameNew.value = []
                                     dialogFormVisible.value = false
                                }else{
                                    ElNotification({
                                        title: '操作失败',
                                        message: '修改失败',
                                        type: 'error',
                                    })
                                    
                                }
                            }else{
                                ElNotification({
                                    title: '操作失败',
                                    message: '操作异常',
                                    type: 'warring',
                                })
                                
                            }
                            
                    })
                    
                    //dialogFormVisible.value = false
                }).catch(() => {//取消回调函数
                    
                })
            
       }
        //嵌套弹出层取消操作
       function switchValueCancel(){
            arraySubjectNameNew.value = []
            switchValue.value = false
       }
       return {
           dialogFormVisible, 
           subjectData, 
           switchValue, 
           store, 
           treeComponent, 
           typeDataSubject, 
           ArrowRight, 
           arraySubjectNameNew, 
           AreYouSure,
           nowData,
           dialogFormVisibleCancel,
           dialogFormVisiblePreservation,
           switchValueCancel,
           accountName,
           updateOperationRecordRemarks
       }
    }
}
</script>

<style>
.affix-container {
  text-align: center;
  height: 400px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
}
</style>